<template>
    <Viewport title="VSCode" icon="/src/assets/icons/vscode.png" :class="{'z-40': focus}" @muti="muti" @cancel="cancel" @mousedown="changeFocus">
        <iframe 
            class="h-full w-full"
            src="http://82.157.137.133:6689/"
            height="320"
            width="480"
            sandbox="allow-forms
             allow-scripts
              allow-same-origin
               allow-popups 
               allow-top-navigation"
        >
        </iframe>
    </Viewport>
</template>

<script setup>
    import { computed } from 'vue';
    import Viewport from '../components/Viewport.vue';
    import { store } from '../store';
    
    const focus = computed(() => store.state.focus === 'vscode')
    const muti = () => store.commit('CHANGE_VSCODE_SHOW', false)
    const cancel = () => {
        store.commit('CHANGE_VSCODE_ACTIVE', false)
        store.commit('CHANGE_VSCODE_SHOW', true)
    }
    const changeFocus = () => {
        store.commit('CHANGE_FOCUS', 'vscode')
        console.log(1, store.state.focus)
    } 



</script>

